<template>
  <div>
    <el-row type="flex" justify="end">
      <el-button
        v-if="roles[0]==='2'"
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        新增道路
      </el-button>
    </el-row>
    <div>
      <el-table
        v-loading="listLoading"
        :data="road"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="道路编号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.roadID }}</span>
          </template>
        </el-table-column>
        <el-table-column label="道路名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.roadName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="通行方向" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.roadDirection }}</span>
          </template>
        </el-table-column>
        <el-table-column label="起点" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.startPoint }}</span>
          </template>
        </el-table-column>
        <el-table-column label="终点" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.endPoint }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设计单位" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.designUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="建造单位" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.constructionUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="道路类型" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.roadTypeID | roadTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="道路等级" align="center">
          <template slot-scope="{row}">
            <span>{{ row.road.roadLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="车行道" align="center" width="80">
          <template slot-scope="{row}">
            <el-button v-if="row.road.roadwayID" size="small" type="warning" icon="el-icon-edit" circle @click="handleRoadway1(row.road)" />
            <el-button v-else type="success" size="small" icon="el-icon-plus" circle @click="handleRoadway1(row.road)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" min-width="140">
          <template slot-scope="{row}">
            <el-button type="primary" size="small" icon="el-icon-edit" circle @click="handleRoadBase(row.road)" />
            <el-popconfirm
              title="该操作不可逆确定删除？"
              @onConfirm="deleteRoadBase(row.road.roadID)"
            >
              <el-button slot="reference" size="small" :disabled="row.roadAudit.auditStatus===1" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>
            <el-button type="info" size="small" icon="el-icon-more" circle @click="showRoadDetail(row.road)" />
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="详细信息"
        :visible.sync="dialogRoadDetailVisible"
        width="60%"
      >
        <RoadDetail v-if="dialogRoadDetailVisible" :road-way="roadDetail.roadway" :road="roadDetail.road" />
      </el-dialog>
      <el-dialog
        title="车行道信息"
        :visible.sync="dialogRoadWayVisible"
      >
        <RoadManageWay :road-way="roadWay" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogRoadWayVisible = false">取 消</el-button>
          <el-button type="primary" @click="tapType==='Create'?createRoadWay():updateRoadWay()">保 存</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="道路基本信息"
        :visible.sync="dialogRoadBaseVisible"
        width="45%"
      >
        <RoadBase :road-base="temp" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogRoadBaseVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="tapType==='Create'?createRoadBase():updateRoadBase()">
            保 存
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { searchRoad, updateRoad, addRoad, deleteRoad } from '@/api/road'
import RoadManageWay from '@/views/roadAudit/components/RoadManageWay'
import RoadBase from '@/views/roadAudit/components/RoadBase'
import { toDateString } from '@/utils/time-handle'
import RoadDetail from '@/views/roadAudit/components/RoadDetail'

export default {
  name: 'RoadManage',
  components: { RoadBase, RoadManageWay, RoadDetail },
  filters: {
    // statusFilter(status) {
    //   if (status === 0) this.active = 1
    //   if (status === 1) this.active = 3
    //   if (status === 2) this.active = 2
    // },
    roadTypeFilter(roadType) {
      if (roadType === 1) return '快速路'
      if (roadType === 2) return '主干路'
      if (roadType === 3) return '广场'
      if (roadType === 4) return '商业繁华街道'
      if (roadType === 5) return '重要生产区道路'
      if (roadType === 6) return '外事活动路线'
      if (roadType === 7) return '游览路线'
      if (roadType === 8) return '次干路'
      if (roadType === 9) return '步行街'
      if (roadType === 10) return '支路中的商业街道'
      if (roadType === 11) return '其他支路'
    }
  },
  data() {
    return {
      // active: 1,
      dialogRoadBaseVisible: false,
      dialogRoadDetailVisible: false,
      roadDetail: {
        road: {},
        roadway: {}
      },
      currentRoad: 1,
      tapType: '',
      side: [],
      temp: {
        constructionDate: {}
      },
      listLoading: true,
      road: [{ road: { constructionDate: {}}, roadAudit: {}}],
      dialogRoadWayVisible: false,
      dialogFacilityVisible: false,
      dialogStatusVisible: false,
      roadWay: { roadway: {}, typeAndLengths: [{}, {}], typeAndThicknesses: [{}, {}] },
      roadFacility: {}
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'departmentId'
    ])
  },
  created() {
    this.getAllRoad()
  },
  methods: {
    showRoadDetail(road) {
      this.roadDetail.road = road
      searchRoad({ searchType: 2, roadwayID: road.roadwayID }).then(response => {
        this.roadDetail.roadway = response
        this.dialogRoadDetailVisible = true
      }).catch(() => {
        this.roadDetail.roadway = null
        this.dialogRoadDetailVisible = true
      })
    },
    deleteRoadBase(road) {
      deleteRoad({ deleteType: 1, roadID: road }).then(() => {
        this.getAllRoad()
        this.$message.success('该道路删除成功')
        this.$notify.warning({
          title: '警告',
          message: '您刚刚删除了一条无法恢复的记录',
          duration: 2000
        })
      })
    },
    createRoadBase() {
      this.temp.constructionDate = this.temp.constructionDate.getFullYear() + '-' + (this.temp.constructionDate.getMonth() + 1 + '').padStart(2, '0') + '-' + (this.temp.constructionDate.getDate() + '').padStart(2, '0')
      addRoad({ addType: 1, departmentID: this.departmentId, roadName: this.temp.roadName, roadDirection: this.temp.roadDirection,
        startPoint: this.temp.startPoint, endPoint: this.temp.endPoint, designUnit: this.temp.designUnit,
        constructionUnit: this.temp.constructionUnit, roadTypeID: this.temp.roadTypeID, roadLevel: this.temp.roadLevel,
        designedSpeed: this.temp.designedSpeed, roadWidthRange: this.temp.roadWidthRange, roadLength: this.temp.roadLength,
        roadArea: this.temp.roadArea, AADT: this.temp.aadt, trafficLevel: this.temp.trafficLevel, township: this.temp.trafficLevel,
        managementClassification: this.temp.managementClassification, managementUnit: this.temp.maintenanceUnit,
        maintenanceUnit: this.temp.maintenanceUnit, constructionDate: this.temp.constructionDate
      }).then(() => {
        this.getAllRoad()
        this.$notify({
          title: 'Success',
          message: '道路新增成功！',
          type: 'success',
          duration: 2000
        })
      })
      this.dialogRoadBaseVisible = false
    },
    updateRoadBase() {
      this.temp.constructionDate = this.temp.constructionDate.getFullYear() + '-' + (this.temp.constructionDate.getMonth() + 1 + '').padStart(2, '0') + '-' + (this.temp.constructionDate.getDate() + '').padStart(2, '0')
      updateRoad({ updateType: 1, roadID: this.temp.roadID, roadName: this.temp.roadName,
        roadDirection: this.temp.roadDirection, startPoint: this.temp.startPoint, endPoint: this.temp.endPoint,
        designUnit: this.temp.designUnit, constructionUnit: this.temp.constructionUnit, roadTypeID: this.temp.roadTypeID,
        roadLevel: this.temp.roadLevel, designedSpeed: this.temp.designedSpeed, roadWidthRange: this.temp.roadWidthRange,
        roadLength: this.temp.roadLength, roadArea: this.temp.roadArea, AADT: this.temp.aadt, trafficLevel: this.temp.trafficLevel,
        township: this.temp.township, managementClassification: this.temp.managementClassification,
        managementUnit: this.temp.managementUnit, maintenanceUnit: this.temp.maintenanceUnit,
        constructionDate: this.temp.constructionDate }).then(() => {
        this.getAllRoad()
        this.$notify({
          title: 'Success',
          message: '道路更新成功！',
          type: 'success',
          duration: 2000
        })
      })
      this.dialogRoadBaseVisible = false
    },
    handleRoadBase(road) {
      this.tapType = 'Update'

      this.temp = Object.assign({}, road)
      this.temp.constructionDate = new Date(toDateString(this.temp.constructionDate))
      console.log(this.temp)
      this.dialogRoadBaseVisible = true
    },
    handleCreate() {
      this.tapType = 'Create'
      this.temp = {}
      this.dialogRoadBaseVisible = true
    },
    createFacility() {
      addRoad({ addType: 5, inspectionWellsNumber: this.roadFacility.inspectionWellsNumber, rainwaterOutletNumber: this.roadFacility.rainwaterOutletNumber,
        streetSignNumber: this.roadFacility.streetSignNumber, treePondArea: this.roadFacility.treePondArea,
        other: this.roadFacility.other, roadID: this.currentRoad }).then(() => {
        this.$notify({
          title: 'Success',
          message: '附属设施成功添加！',
          type: 'success',
          duration: 2000
        })
        this.getAllRoad()
        console.log(this.road[3].road)
      })
      this.dialogFacilityVisible = false
    },
    updateFacility() {
      updateRoad({ updateType: 5, affiliatedFacilityID: this.roadFacility.affiliatedFacilityID,
        inspectionWellsNumber: this.roadFacility.inspectionWellsNumber, rainwaterOutletNumber: this.roadFacility.rainwaterOutletNumber,
        streetSignNumber: this.roadFacility.streetSignNumber, treePondArea: this.roadFacility.treePondArea,
        other: this.roadFacility.other, roadID: this.roadFacility.roadID }).then(() => {
        this.$notify({
          title: '成功',
          message: '附属设施信息更新成功',
          type: 'success',
          duration: 2000
        })
      })
      this.dialogFacilityVisible = false
    },
    createRoadWay() {
      addRoad({ addType: 2, roadID: this.currentRoad,
        numberOfLanes: this.roadWay.roadway.numberOfLanes, trafficDirection: this.roadWay.roadway.trafficDirection,
        roadwayWidthRange: this.roadWay.roadway.roadwayWidthRange, leftNonRoadwayWidthRange: this.roadWay.roadway.leftNonRoadwayWidthRange,
        rightNonRoadwayWidthRange: this.roadWay.roadway.rightNonRoadwayWidthRange,
        roadwayArea: this.roadWay.roadway.roadwayArea, busLane: this.roadWay.roadway.busLane,
        lengthNumber: 2, position0: 0, type0: this.roadWay.typeAndLengths[0].type, Length0: this.roadWay.typeAndLengths[0].length,
        position1: 1, type1: this.roadWay.typeAndLengths[1].type, Length1: this.roadWay.typeAndLengths[1].length,
        thickNumber: 2, thickposition0: 0, thicktype0: this.roadWay.typeAndThicknesses[0].type, thickness0: this.roadWay.typeAndThicknesses[0].thickness,
        thickposition1: 1, thicktype1: this.roadWay.typeAndThicknesses[1].type,
        thickness1: this.roadWay.typeAndThicknesses[1].thickness }).then(() => {
        this.$notify({
          title: '成功',
          message: '车行道成功添加！',
          type: 'success',
          duration: 2000
        })
        this.getAllRoad()
        console.log(this.road[3].road)
      })
      this.dialogRoadWayVisible = false
    },
    updateRoadWay() {
      // console.log(this.roadWay.roadway.roadwayID)
      updateRoad({ updateType: 2, roadID: this.roadWay.roadway.roadID, roadwayID: this.roadWay.roadway.roadwayID,
        numberOfLanes: this.roadWay.roadway.numberOfLanes, trafficDirection: this.roadWay.roadway.trafficDirection,
        roadwayWidthRange: this.roadWay.roadway.roadwayWidthRange, leftNonRoadwayWidthRange: this.roadWay.roadway.leftNonRoadwayWidthRange,
        rightNonRoadwayWidthRange: this.roadWay.roadway.rightNonRoadwayWidthRange,
        roadwayArea: this.roadWay.roadway.roadwayArea, busLane: this.roadWay.roadway.busLane,
        lengthNumber: 2, position0: 0, type0: this.roadWay.typeAndLengths[0].type, Length0: this.roadWay.typeAndLengths[0].length,
        position1: 1, type1: this.roadWay.typeAndLengths[1].type, Length1: this.roadWay.typeAndLengths[1].length,
        thickNumber: 2, thickposition0: 0, thicktype0: this.roadWay.typeAndThicknesses[0].type, thickness0: this.roadWay.typeAndThicknesses[0].thickness,
        thickposition1: 1, thicktype1: this.roadWay.typeAndThicknesses[1].type, thickness1: this.roadWay.typeAndThicknesses[1].thickness }).then(() => {
        this.$notify({
          title: '成功',
          message: '道路信息更新成功',
          type: 'success',
          duration: 2000
        })
      })
      this.dialogRoadWayVisible = false
    },
    getList() {
      this.listLoading = false
    },
    handleRoadway1(road) {
      if (road.roadwayID) {
        this.currentRoad = road.roadID
        searchRoad({ searchType: 2, roadwayID: road.roadwayID }).then(response => {
          this.roadWay = response
          this.dialogRoadWayVisible = true
          this.$message({
            message: '成功获取该车行道信息',
            type: 'success'
          })
          this.dialogRoadWayVisible = true
        })
        this.tapType = 'Update'
      } else {
        this.currentRoad = road.roadID
        this.roadWay = { roadway: {},
          typeAndLengths: [{}, {}],
          typeAndThicknesses: [{}, {}]
        }
        this.dialogRoadWayVisible = true
        this.tapType = 'Create'
      }
    },
    handleFacility1(road) {
      if (road.affiliatedFacilityID) {
        searchRoad({ searchType: 5, affiliatedFacilityID: road.affiliatedFacilityID }).then(response => {
          this.roadFacility = response
          this.dialogFacilityVisible = true
          this.$message({
            message: '成功获取该附属设施信息',
            type: 'success'
          })
        })
        this.tapType = 'Update'
      } else {
        this.currentRoad = road.roadID
        this.roadFacility = {}
        this.dialogFacilityVisible = true
        this.tapType = 'Create'
      }
    },
    getAllRoad() {
      if (String(this.departmentId) === '1') {
        searchRoad({ searchType: 1, superpower: 1 }).then(response => {
          this.road = response
          this.$message.success('已刷新道路信息')
          setTimeout(() => {
            this.listLoading = false
          }, 100)
        })
      } else {
        searchRoad({ searchType: 1, superpower: 2, departmentID: this.departmentId }).then(response => {
          this.road = response
          this.$message.success('已刷新道路信息')
          setTimeout(() => {
            this.listLoading = false
          }, 100)
        })
      }
    }
  }
}
</script>

